<template>
  <el-dialog v-model="state.visible" :title="'修改' + state.changeUsername + '密码'">
    <el-form :model="form" status-icon ref="formRef" :rules="rules">
      <el-form-item v-show="!state.changeUsername" label="旧密码" :prop="state.changeUsername ? '' : 'oldPassword'">
        <el-input show-password v-model="form.oldPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input show-password v-model="form.newPassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="resetForm">重置</el-button>
        </span>
      </template>
  </el-dialog>
</template>

<script>
import { ref, reactive,  defineComponent } from "vue"
import { useStore } from "vuex"
import { changePassword } from "@/api/axios/user"
import { ElMessage } from "element-plus"
import { validatePassword } from "@/api/validate/userValidate"
import { CODE_KEY, CODE_SUCCESS } from "@/api/params"

export default defineComponent({
  name: "UserInfoDialog",
  props: {
    state: {
      changeUsername: String,
      visible: Boolean,
    }
  },
  setup(props) {
    
    const store = useStore()
    
    const formRef = ref()
    
    const form = reactive({
      oldPassword: '',
      newPassword: ''
    })
    
    // 验证规则，直接通过验证
    const validatePass = (rule, value, callback) => {
      callback()
    }
    
    // 验证规则
    const rules = reactive({
      // 对应 prop 里名字
      oldPassword: [
        { validator: validatePassword , trigger: 'change' }
      ],
      newPassword: [
        { validator: validatePassword, trigger: 'change' }
      ]
    })
    
    // 点击取消
    const cancel = () => {
      props.state.visible = false
    }
    
    // 点击重置
    const resetForm = () => {
      formRef.value.resetFields()
    }
    
    // 点击提交
    const submit = () => {
      console.log("submit")
      // console.log(formRef)
      formRef.value.validate((valid) => {
        console.log(valid)
        if(valid) {
          console.log("start change password:", )
          changePassword({
            // 登录的用户名
            username: store.getters.getUserInfo.username,
            // 要修改密码的用户名，如果为 undefined 则为用户名修改自己的密码
            changeUsername: props.state.changeUsername,
            oldPassword: form.oldPassword,
            newPassword: form.newPassword
          }).then(res => {
            console.log("res==>:",res)
            if(res.data[CODE_KEY] == CODE_SUCCESS) {
              ElMessage.success("修改成功")
              formRef.value.resetFields()
              cancel()
            } else {
              
            }
          })
        }
      })
    }
    
    return {
      form,
      rules,
      cancel,
      resetForm,
      submit,
      formRef,
    }
  }
})
</script>

<style>
</style>
